<template>
  <div class="withdraw-stats-page">
    <!-- 页面标题 -->
    <div class="page-title">提现统计</div>
    
    <!-- 统计信息 -->
    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-title">总数</div>
        <div class="stat-value">{{ stats.total }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">总人数</div>
        <div class="stat-value">{{ stats.totalUsers }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">提现总额</div>
        <div class="stat-value highlight">¥{{ formatAmount(stats.totalAmount) }}</div>
      </div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-form">
      <div class="search-row">
        <div class="form-item">
          <label class="form-label">编号姓名或关键词</label>
          <input 
            type="text" 
            class="form-input" 
            v-model="searchForm.keyword"
            placeholder="请输入编号、姓名或关键词"
          >
        </div>
        <div class="form-item">
          <label class="form-label">最近申请时间</label>
          <input 
            type="date" 
            class="form-input" 
            v-model="searchForm.applyTime"
          >
        </div>
        <div class="form-item">
          <label class="form-label">最近提现时间</label>
          <input 
            type="date" 
            class="form-input" 
            v-model="searchForm.withdrawTime"
          >
        </div>
        <div class="form-btn">
          <button class="btn btn-primary" @click="handleSearch">检索</button>
          <button class="btn btn-secondary" @click="handleReset">重置</button>
          <button class="btn btn-export" @click="handleExport">导出</button>
        </div>
      </div>
    </div>
    
    <!-- 表格区域 -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">统计列表</div>
      </div>
      
      <div class="table-wrapper">
        <table class="data-table">
          <thead>
            <tr>
              <th>账号</th>
              <th>用户</th>
              <th>提现次数</th>
              <th>提现总金额</th>
              <th>最近申请时间</th>
              <th>最近提现时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in paginatedData" :key="item.id">
              <td>{{ item.account }}</td>
              <td>{{ item.user }}</td>
              <td>{{ item.withdrawCount }}</td>
              <td class="highlight">¥{{ formatAmount(item.totalAmount) }}</td>
              <td>{{ item.lastApplyTime }}</td>
              <td>{{ item.lastWithdrawTime }}</td>
              <td>
                <button class="btn btn-text" @click="handleDetail(item)">查看详情</button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner"></div>
          <div>加载中...</div>
        </div>
        
        <div v-if="paginatedData.length === 0 && !loading" class="empty-state">
          暂无数据
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <div class="pagination-info">
          共 {{ pagination.total }} 条记录
        </div>
        <div class="pagination-controls">
          <select class="page-size-select" v-model="pagination.pageSize" @change="handlePageSizeChange">
            <option value="10">10条/页</option>
            <option value="20">20条/页</option>
            <option value="50">50条/页</option>
            <option value="100">100条/页</option>
          </select>
          
          <button 
            class="pagination-btn" 
            :disabled="pagination.currentPage === 1"
            @click="handlePageChange(pagination.currentPage - 1)"
          >
            上一页
          </button>
          
          <div class="pagination-pages">
            <button 
              v-for="page in totalPages" 
              :key="page"
              class="pagination-page"
              :class="{ active: page === pagination.currentPage }"
              @click="handlePageChange(page)"
            >
              {{ page }}
            </button>
          </div>
          
          <button 
            class="pagination-btn" 
            :disabled="pagination.currentPage === totalPages"
            @click="handlePageChange(pagination.currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'

// 类型定义
interface WithdrawRecord {
  id: string
  account: string
  user: string
  withdrawCount: number
  totalAmount: number
  lastApplyTime: string
  lastWithdrawTime: string
}

interface SearchForm {
  keyword: string
  applyTime: string
  withdrawTime: string
}

interface Stats {
  total: number
  totalUsers: number
  totalAmount: number
}

interface Pagination {
  currentPage: number
  pageSize: number
  total: number
}

// 响应式数据
const stats = reactive<Stats>({
  total: 210,
  totalUsers: 200,
  totalAmount: 1000000
})

const searchForm = reactive<SearchForm>({
  keyword: '',
  applyTime: '',
  withdrawTime: ''
})

const tableData = ref<WithdrawRecord[]>([
  {
    id: '1',
    account: '152645847851526',
    user: '张三',
    withdrawCount: 1,
    totalAmount: 200.00,
    lastApplyTime: '2025-01-08 20:02',
    lastWithdrawTime: '2025-01-08 20:02'
  },
  {
    id: '2',
    account: '152645847851526',
    user: '张三',
    withdrawCount: 1,
    totalAmount: 100.00,
    lastApplyTime: '2025-01-08 20:02',
    lastWithdrawTime: '2025-01-08 20:02'
  },
  {
    id: '3',
    account: '152645847851526',
    user: '张三',
    withdrawCount: 1,
    totalAmount: 100.00,
    lastApplyTime: '2025-01-08 20:02',
    lastWithdrawTime: '2025-01-08 20:02'
  },
  {
    id: '4',
    account: '152645847851526',
    user: '张三',
    withdrawCount: 1,
    totalAmount: 100.00,
    lastApplyTime: '2025-01-08 20:02',
    lastWithdrawTime: '2025-01-08 20:02'
  },
  {
    id: '5',
    account: '152645847851526',
    user: '张三',
    withdrawCount: 1,
    totalAmount: 100.00,
    lastApplyTime: '2025-01-08 20:02',
    lastWithdrawTime: '2025-01-08 20:02'
  },
  {
    id: '6',
    account: '152645847851526',
    user: '张三',
    withdrawCount: 1,
    totalAmount: 100.00,
    lastApplyTime: '2025-01-08 20:02',
    lastWithdrawTime: '2025-01-08 20:02'
  },
  {
    id: '7',
    account: '152645847851527',
    user: '李四',
    withdrawCount: 3,
    totalAmount: 450.00,
    lastApplyTime: '2025-01-07 15:30',
    lastWithdrawTime: '2025-01-07 16:00'
  },
  {
    id: '8',
    account: '152645847851528',
    user: '王五',
    withdrawCount: 2,
    totalAmount: 300.00,
    lastApplyTime: '2025-01-06 10:15',
    lastWithdrawTime: '2025-01-06 11:00'
  },
  {
    id: '9',
    account: '152645847851529',
    user: '赵六',
    withdrawCount: 5,
    totalAmount: 800.00,
    lastApplyTime: '2025-01-05 14:20',
    lastWithdrawTime: '2025-01-05 15:30'
  },
  {
    id: '10',
    account: '152645847851530',
    user: '钱七',
    withdrawCount: 2,
    totalAmount: 350.00,
    lastApplyTime: '2025-01-04 09:45',
    lastWithdrawTime: '2025-01-04 10:20'
  }
])

const pagination = reactive<Pagination>({
  currentPage: 1,
  pageSize: 10,
  total: 100
})

const loading = ref(false)

// 计算属性
const filteredData = computed(() => {
  let data = [...tableData.value]
  
  // 根据关键词筛选
  if (searchForm.keyword) {
    const keyword = searchForm.keyword.toLowerCase()
    data = data.filter(item => 
      item.account.includes(keyword) || 
      item.user.toLowerCase().includes(keyword)
    )
  }
  
  // 根据申请时间筛选
  if (searchForm.applyTime) {
    data = data.filter(item => item.lastApplyTime.includes(searchForm.applyTime))
  }
  
  // 根据提现时间筛选
  if (searchForm.withdrawTime) {
    data = data.filter(item => item.lastWithdrawTime.includes(searchForm.withdrawTime))
  }
  
  return data
})

const paginatedData = computed(() => {
  const startIndex = (pagination.currentPage - 1) * pagination.pageSize
  const endIndex = startIndex + pagination.pageSize
  return filteredData.value.slice(startIndex, endIndex)
})

const totalPages = computed(() => {
  return Math.ceil(filteredData.value.length / pagination.pageSize)
})

// 方法
const formatAmount = (amount: number) => {
  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const handleSearch = () => {
  pagination.currentPage = 1
  // 在实际应用中，这里应该调用API获取数据
  console.log('搜索条件:', searchForm)
}

const handleReset = () => {
  searchForm.keyword = ''
  searchForm.applyTime = ''
  searchForm.withdrawTime = ''
  pagination.currentPage = 1
}

const handleExport = () => {
  // 在实际应用中，这里应该调用导出API
  alert('导出功能在实际应用中会调用后端API生成Excel文件')
}

const handleDetail = (item: WithdrawRecord) => {
  // 在实际应用中，这里可以跳转到详情页面或打开详情弹窗
  alert(`查看用户 ${item.user} 的提现详情`)
}

const handlePageChange = (page: number) => {
  if (page < 1 || page > totalPages.value) return
  pagination.currentPage = page
}

const handlePageSizeChange = () => {
  pagination.currentPage = 1
}

onMounted(() => {
  // 初始化数据
  pagination.total = tableData.value.length
})
</script>

<style lang="scss" scoped>
.withdraw-stats-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.nav-tabs {
  display: flex;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.nav-tab {
  padding: 15px 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.nav-tab.active {
  color: #409eff;
  border-bottom-color: #409eff;
  background-color: #ecf5ff;
}

.nav-tab:hover {
  background-color: #f5f7fa;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #303133;
}

.stats-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-value.highlight {
  color: #f56c6c;
}

.search-form {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-row {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  color: #606266;
}

.form-input {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  width: 200px;
}

.form-input:focus {
  outline: none;
  border-color: #409eff;
}

.form-btn {
  padding: 8px 12px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  margin-right: 12px;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

.btn-secondary {
  background-color: #909399;
  color: white;
  margin-right: 12px;
}

.btn-secondary:hover {
  background-color: #a6a9ad;
}

.btn-export {
  background-color: #67c23a;
  color: white;
}

.btn-export:hover {
  background-color: #85ce61;
}

.btn-text {
  background: transparent;
  color: #409eff;
}

.btn-text:hover {
  background: #ecf5ff;
}

.table-container {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-title {
  font-size: 16px;
  font-weight: bold;
}

.table-wrapper {
  position: relative;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.data-table tr:hover {
  background-color: #f5f7fa;
}

.highlight {
  color: #f56c6c;
  font-weight: bold;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size-select {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.pagination-btn, .pagination-page {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled),
.pagination-page:hover:not(.active) {
  background: #f5f7fa;
}

.pagination-btn:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.pagination-page.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}

.pagination-pages {
  display: flex;
  gap: 5px;
}

@media (max-width: 768px) {
  .stats-container {
    flex-direction: column;
  }
  
  .search-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-input {
    width: 100%;
  }
  
  .pagination-container {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 4px;
  }
}
</style>
